<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info" @click="handleUserInfoClick">
			<template v-if="isLogin">
				<image class="avatar" :src="userInfo.avatar || '/static/logo.png'"></image>
				<view class="info">
					<text class="nickname">{{userInfo.nickname || userInfo.username || '未设置昵称'}}</text>
					<text class="phone">{{userInfo.mobile || '未绑定手机号'}}</text>
					<text class="user-type">{{userTypeText}}</text>
				</view>
			</template>
			<template v-else>
				<image class="avatar" src="/static/logo.png"></image>
				<view class="info">
					<text class="nickname">未登录</text>
					<text class="login-btn" @click.stop="goToLogin">点击登录</text>
				</view>
			</template>
		</view>

		<!-- 工单状态统计 -->
		<view class="order-stats" v-if="isLogin">
			<view class="stat-item" v-for="(item, index) in orderStats" :key="index">
				<view class="count">{{item.count}}</view>
				<view class="label">{{item.label}}</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" v-for="(item, index) in functionList" :key="index"
				@click="handleFunction(item.type)">
				<uni-icons :type="item.icon" size="24" color="#2B65FE"></uni-icons>
				<text class="label">{{item.label}}</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			
			<!-- 退出登录按钮，仅在登录状态下显示 -->
			<view class="function-item logout-btn" v-if="isLogin" @click="handleLogout">
				<uni-icons type="closeempty" size="24" color="#FF5151"></uni-icons>
				<text class="label logout-label">退出登录</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import { http } from '../../utils/request.js'
	import { removeToken, checkIsLoggedIn } from '../../utils/auth.js'
	
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				orderStats: [{
					label: '待派工',
					count: 0
				}, {
					label: '待处理',
					count: 0
				}, {
					label: '处理中',
					count: 0
				}, {
					label: '已完成',
					count: 0
				}],
				functionList: [{
					type: 'profile',
					icon: 'person',
					label: '个人资料'
				}, {
					type: 'history',
					icon: 'calendar',
					label: '历史工单'
				}, {
					type: 'about',
					icon: 'info',
					label: '关于我们'
				}]
			}
		},
		computed: {
			// 根据用户类型返回对应的文本
			userTypeText() {
				if (!this.userInfo || this.userInfo.userType === undefined) return '';
				return this.userInfo.userType === 0 ? '学生用户' : '维修人员';
			}
		},
		methods: {
			handleUserInfoClick() {
				if (!this.isLogin) {
					this.goToLogin()
				}
			},
			
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			
			// 获取用户信息
			async fetchUserInfo() {
				try {
					console.log('获取用户信息')
					const res = await http.get('/api/user/getUserInfo')
					console.log('用户信息响应:', res)
					
					if (res.code === 0 && res.data) {
						// 更新用户信息
						this.userInfo = res.data
						// 保存到本地存储
						uni.setStorageSync('userInfo', res.data)
						console.log('用户信息已更新:', this.userInfo)
					} else {
						console.error('获取用户信息失败:', res.msg)
					}
				} catch (error) {
					console.error('获取用户信息异常:', error)
				}
			},
			
			checkLoginStatus() {
				// 使用封装好的checkIsLoggedIn方法检查登录状态
				const isLoggedIn = checkIsLoggedIn()
				console.log('检查登录状态:', isLoggedIn)
				
				if (isLoggedIn) {
					this.isLogin = true
					// 先从本地存储获取用户信息
					this.userInfo = uni.getStorageSync('userInfo') || {}
					console.log('已登录，本地用户信息:', this.userInfo)
					
					// 然后从服务器获取最新用户信息
					this.fetchUserInfo()
				} else {
					this.isLogin = false
					this.userInfo = {}
					console.log('未登录或登录已过期')
				}
			},
			
			handleFunction(type) {
				// 处理功能点击
				if (!this.isLogin && type !== 'about') {
					this.goToLogin()
					return
				}
				
				switch (type) {
					case 'profile':
						// 跳转到修改资料页面
						break;
					case 'history':
						// 跳转到历史页面
						break;
					case 'about':
						// 跳转到关于页面
						break;
				}
			},
			
			async handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 调用后端登出接口
								await http.post('/api/logout')
								
								// 清除本地存储的登录信息
								removeToken()
								uni.removeStorageSync('userInfo')
								
								// 更新登录状态
								this.isLogin = false
								this.userInfo = {}
								
								uni.showToast({
									title: '已退出登录',
									icon: 'success'
								})
							} catch (error) {
								console.error('退出登录失败:', error)
								// 即使后端接口失败，也清除本地登录信息
								removeToken()
								uni.removeStorageSync('userInfo')
								this.isLogin = false
								this.userInfo = {}
							}
						}
					}
				})
			}
		},
		onShow() {
			this.checkLoginStatus()
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.user-info {
		background-color: #2B65FE;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-color: #fff;
	}

	.info {
		margin-left: 30rpx;
	}

	.nickname {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.phone, .login-btn, .user-type {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-top: 10rpx;
		display: block;
	}
	
	.user-type {
		background-color: rgba(255, 255, 255, 0.2);
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
	}

	.login-btn {
		color: #fff;
		background-color: rgba(255, 255, 255, 0.2);
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		margin-top: 16rpx;
	}

	.order-stats {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
	}

	.count {
		color: #2B65FE;
		font-size: 36rpx;
		font-weight: bold;
	}

	.label {
		color: #666;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.function-list {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.function-item {
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-item uni-icons {
		margin-right: 20rpx;
	}

	.function-item uni-icons:last-child {
		margin-left: auto;
		margin-right: 0;
	}
	
	.logout-btn {
		margin-top: 20rpx;
	}
	
	.logout-label {
		color: #FF5151;
	}
</style>